<template>
  <div style="width: 100vw;">
    <div class="swiper-wrap" :style="{ height: screenHeight + 'px' }">
      <div class="swiper-content" :style="{ transform:'translate3d(0px,'+ nowTop + 'vh, 0px)'}">
        <div class="product-part-wrap contain" v-for="(item,index) in data" :key="index" :style="'background-image: url('+item.img+')'">
          <div class="product-part-body">
            <div class="product-part-msg">
              <div class="product-part-icon" :style="'background-image: url('+item.icon+')'"></div>
              <div class="product-part-title">{{item.title}}</div>
              <div class="product-part-detail">{{item.conton}}</div>
              <div class="product-part-qrcode" v-if="item.qrCode === ''?false:true">
                <img :src="item.qrCode" alt="qrcode" height="120px"/>
                <div style="text-align: center; width: 120px; margin-top: 20px;">
                  <div>扫一扫</div>
                  <div>马上体验</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="indicator-wrap">
        <div class="product-indicator-item" :class="{'product-selected-item':index === curIndex}" v-for="(item,index) in data" :key="item.id" :style="'background-image: url('+item.icon+')'"></div>
      </div>
    </div>
  </div>
</template>

<script  setup>
import { onMounted, onUnmounted, reactive, ref } from 'vue'
import { throttle } from 'lodash' // 引入lodash的throttle用于节流
const screenWeight = ref(0)
const screenHeight = ref(0)
const index = ref(0)
const curIndex = ref(0)
const startTime = ref(0)
const endTime = ref(0)
const nowTop = ref(0)
const data = reactive([
  {
    id:0,
    icon:'https://img0.baidu.com/it/u=1033018635,7901815&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
    title:'邮客行',
    conton:'“邮客行｜南邮访客登记”小程序是一款线上入校访客登记系统。疫情防控形势较为严峻复杂，来校访客登记需纳入高校常规化管理范畴。“邮客行”联合企业微信和微信两个平台，实现了入校访客在微信端申请，校内管理人员在企业微信端审批的功能。',
    img:'https://img0.baidu.com/it/u=1033018635,7901815&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
    qrCode:'https://img0.baidu.com/it/u=1033018635,7901815&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'
  },
  {
    id:2,
    icon:'https://img0.baidu.com/it/u=1033018635,7901815&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
    title:'邮客行',
    conton:'“邮客行｜南邮访客登记”小程序是一款线上入校访客登记系统。疫情防控形势较为严峻复杂，来校访客登记需纳入高校常规化管理范畴。“邮客行”联合企业微信和微信两个平台，实现了入校访客在微信端申请，校内管理人员在企业微信端审批的功能。',
    img:'https://img0.baidu.com/it/u=1033018635,7901815&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
    qrCode:'https://img0.baidu.com/it/u=1033018635,7901815&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'
  },
  {
    id:3,
    icon:'https://img0.baidu.com/it/u=1033018635,7901815&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
    title:'邮客行',
    conton:'“邮客行｜南邮访客登记”小程序是一款线上入校访客登记系统。疫情防控形势较为严峻复杂，来校访客登记需纳入高校常规化管理范畴。“邮客行”联合企业微信和微信两个平台，实现了入校访客在微信端申请，校内管理人员在企业微信端审批的功能。',
    img:'https://img0.baidu.com/it/u=1033018635,7901815&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
    qrCode:''
  },
])
// 声明变量
let main = null
let obj = []
// 初始化方法
onMounted(() => {
  //获取屏幕宽度和高度，并将其赋值给screenWeight和screenHeight变量。
  screenWeight.value = document.documentElement.clientWidth
  screenHeight.value = document.documentElement.clientHeight

  //获取页面中所有div元素，并遍历它们。
  main = document.getElementById('main')
  obj = Array.from(document.getElementsByTagName('div'))
  obj.forEach(div => {
    //如果某个div元素的类名为page，则将其高度设置为屏幕高度。
    if (div.className === 'page') {
      div.style.height = `${screenHeight.value}px`
    }
  })
  //获取页面中所有类名为page的元素的数量，并将其赋值给pageNum变量。
  // pageNum.value = document.querySelectorAll('.page').length;

  // 添加滚动事件监听器
  const scrollHandler = throttle((event) => {
    //定义一个节流函数scrollHandler，用于限制滚动事件的触发频率。
    scrollFun(event)
  }, 1500)

  if (/(Firefox)/i.test(navigator.userAgent)) {
    document.addEventListener('DOMMouseScroll', scrollHandler, false)
  } else {
    document.addEventListener('wheel', scrollHandler, { passive: false })
  }
  //在组件卸载时，移除滚动事件监听器
  onUnmounted(() => {
    document.removeEventListener('DOMMouseScroll', scrollHandler, false)
    document.removeEventListener('wheel', scrollHandler, { passive: false })
  })
})


const toPage = (indexValue, height) => {
  if (indexValue !== curIndex.value) {
    let delta = indexValue - curIndex.value
    nowTop.value = nowTop.value + height
    if(indexValue<0){
      indexValue = indexValue * -1
    }
    curIndex.value = indexValue

  }
}

const scrollFun = (event) => {
  console.log(event)
  //获取当前时间
  startTime.value = new Date().getTime()
  //获取事件对象中的垂直滚动距离deltaY的相反数，若不存在则取detail。
  let delta = (event.deltaY * -1) || event.detail
  //判断两次滚动事件之间的时间差是否大于1000毫秒，以避免快速滚动时的误操作。
  if ((startTime.value - endTime.value) > 1000) {
    if (delta > 0 && nowTop.value < 0) {
      //若滚动距离为正且当前页面顶部距离大于等于下一页的顶部距离，则将页面索引加1，并调用toPage函数切换到下一页
      index.value++
      toPage(index.value, delta)
    } else if (delta < 0 && nowTop.value > ((data.length-1) * -100)) {
      //若滚动距离为负且当前页面顶部距离小于0，则将页面索引减1，并调用toPage函数切换到上一页。
      index.value--
      toPage(index.value, delta)
    }
    //获取当前时间并赋值给endTime，用于计算时间差
    endTime.value = new Date().getTime()
  }
}
</script>

<style scoped>
.swiper-wrap{
  overflow: hidden;

  .swiper-content{
    height: 100vh;
    transition: all .3s ease-in-out;
    width: 100vw;

    .product-part-wrap{
      background-position: 0;
      background-repeat: no-repeat;
      background-size: cover;
      display: flex;
      height: 100%;
      justify-content: center;
      overflow: hidden;
      width: 100vw;

      .product-part-body{
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-left: 100px;
        margin-right: 100px;
        max-width: 78vw;
        width: 100vw;
        .product-part-msg{
          display: flex;
          flex-direction: column;
          justify-content: center;
          width: 340px;
          z-index: 100;
          .product-part-icon{
            background-position: 50%;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            height: 72px;
            width: 72px;
          }
          .product-part-title{
            font-family: Gilroy-Bold, -apple-system, Sofia Pro, Microsoft YaHei, Helvetica, Arial, sans-serif;
            font-size: 1.7rem;
            font-weight: 700;
            height: 32px;
            line-height: 32px;
            margin-top: 32px;
            width: 100%;
          }
          .product-part-detail{
            font-family: Gilroy-Bold, -apple-system, Sofia Pro, Microsoft YaHei, Helvetica, Arial, sans-serif;
            font-size: 16px;
            line-height: 2;
            margin-top: 24px;
            white-space: pre-wrap;
            width: 100%;
          }
          .product-part-qrcode{
            margin-top: 2rem;
          }
        }
      }
    }
  }

  .indicator-wrap{
    position: absolute;
    right: 5vw;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 30px;
    z-index: 10;

    .product-indicator-item{
      background-position: 50%;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      border-radius: 50%;
      cursor: pointer;
      height: 4vh;
      margin: 24px 0;
      min-height: 30px;
      min-width: 30px;
      overflow: hidden;
      transition: all .2s ease-in-out;
      width: 4vh;
    }

  }
}
.product-selected-item{
  box-shadow: 0 9px 18px 0 rgba(0, 0, 0, .15);
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}
</style>
